<template>
	<div class="root-form-bar" style="padding: 30px;">
		<el-form ref="form" :model="form" size="medium" label-width="120px" v-loading="loading">
			<el-row class="different">
				<el-col :span="8">
					<div class="grid-content bg-purple">
						<el-form-item label="仓库">
							<el-input v-model="form.warehouseName"   disabled></el-input>
						</el-form-item>
					</div>
				</el-col>

				<el-col :span="8">
					<el-form-item label="收款单号">
						<el-input v-model="form.code" :disabled="true" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple">
						<el-form-item label="制单日期">
							<el-input v-model="form.gmtCreated" disabled></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple">
						<el-form-item label="付款人" >
							<el-input v-model="form.shipmentName" disabled></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple">
						<el-form-item label="收款金额">
							<el-input v-model="form.amountCollected"  disabled></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="16">
					<el-form-item label="备注">
						<el-input v-model="form.remarks"  disabled></el-input>
						</el-form-item>
				</el-col>
			</el-row>
			<vxe-table
				class="custom-scrollbar"
				ref="xTable"
				border
				stripe
				height="600"
				highlight-current-row
				highlight-hover-row
				show-header-overflow
				show-overflow
				columnMinWidth="150px"
				:align="tableProps.allAlign"
				:data="form.receiptItemList"
				:edit-config="{
					trigger: 'click',
					mode: 'cell',
					activeMethod: activeCellMethod
				}"
				show-footer
				:footer-method="renderFooter"
				>
				<vxe-table-column field="receiptCode" title="单号" width="270"></vxe-table-column>
				<vxe-table-column field="gmtCreated" title="订单日期" width="120"></vxe-table-column>

				<vxe-table-column field="goodCode" title="商品编码" width="120"></vxe-table-column>
				<vxe-table-column field="goodsName" title="商品名称" width="120"></vxe-table-column>
				<vxe-table-column field="quantity" title="数量" width="120"></vxe-table-column>
				<vxe-table-column field="weight" title="重量（吨）" width="120"></vxe-table-column>
				<vxe-table-column field="receiveLot" title="收货批次" width="120"></vxe-table-column>
				<vxe-table-column field="feeType" title="费用类型" width="120"></vxe-table-column>
				<vxe-table-column field="gmtSettledBegin" title="开始时间" width="120"></vxe-table-column>
				<vxe-table-column field="gmtSettledEnd" title="结束时间" width="120"></vxe-table-column>
				<vxe-table-column field="billingUnit" title="结算单位" width="120"></vxe-table-column>
				<vxe-table-column field="unitPrice" title="单价" width="120"></vxe-table-column>
				<vxe-table-column field="amountMoney" title="金额" width="120"></vxe-table-column>
				<vxe-table-column field="settledMoney" title="已结算金额" width="120"></vxe-table-column>
				<vxe-table-column field="unsettledMoney" title="未结算金额" width="120"></vxe-table-column>

				<vxe-table-column field="thisSettledMoney" title="本次结算金额"  width="120">
				</vxe-table-column>
				<vxe-table-column field="shipmentName" title="备注"></vxe-table-column>
			</vxe-table>
		</el-form>
	</div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import XEUtils from "xe-utils";
import VXEUtils from "vxe-utils";
import { receiptDetail } from '@/api/settlement';
import request from '@/utils/request';
export default {
	data() {
		return {
			form: {
				warehouseCode: '',
				supplierCode: '',
				shipmentCode: '',
				gmtPlanArrival: '',
				customerCode: '',
				remark: '',
				list_number: '',
				purchase_type: '',
				paymentAmount: 0,
				owedAmount: 0,
				purchaseItemList: [{}],
			},
			tableProps: {
				allAlign: 'center',
				columnConfig: {
					minWidth: '150px'
				}
			},
			loading: false
		};
	},
	created() {
		this.getDetails();
	},
	methods: {
		// 获取页面信息
		getDetails() {
			this.loading = true;
			let code = this.$route.query.code ? this.$route.query.code : '';
			receiptDetail(code).then(response => {
				this.form = response.data
				this.loading = false;
			});
		},
		
		activeCellMethod({ column, columnIndex }) {
			if (this.ifEdit) {
				return false;
			}
			return true;
		},
		renderFooter({ columns, data }) {
			return [
				columns.map((column, columnIndex) => {
					if (columnIndex === 1) {
						return '合计';
					}
					if (['amountMoney','quantity', 'weight','unsettledMoney','settledMoney', 'settledMoney', 'thisSettledMoney'].includes(column.property)) {
						return XEUtils.sum(data, column.property);
					}
					return null;
				})
			];
		},
	}
};
</script>
<style lang="scss" scoped>
.root-form-bar {
	background-color: rgba(240, 242, 250, 1);
	.el-form {
		// background: rgba(255, 255, 255, 1);
		position: relative;
		
		// &:after {
		// 	content: '';
		// 	width: 7px;
		// 	height: 100%;
		// 	position: absolute;
		// 	left: 0;
		// 	top: 0;
		// 	background-color: rgba(255, 125, 25, 1);
		// }
		.different{
			background-color: #FFFFFF;
			margin-bottom: 30px;
			padding: 20px 10px 0 0;
			border-left: 4px solid rgba(255, 125, 25, 1);
		}
	}
	&-row {
		margin-top: 100px;
	}
}
.caozuo {
	i {
		cursor: pointer;
		color: #02a7f0;
		font-size: 20px;
		&:hover {
			opacity: 0.6;
		}
	}
}
</style>
